<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="150px" size="small">
      <el-form-item label="上架状态">
        <div class="flex ai-center">
          <el-switch v-model="form.is_publish" />
          <p class="ml-10">{{ form.is_publish ? '上架中' : '待上架' }}</p>
        </div>
      </el-form-item>
      <el-form-item label="短剧名" prop="title">
        <el-input v-model="form.title" placeholder="请输入短剧名" />
      </el-form-item>
      <el-form-item label="封面" prop="cover_oss_id">
        <ImageUploadOss :oss-id.sync="form.cover_oss_id" :value="form.cover" :limit="1" />
      </el-form-item>
      <el-form-item label="短剧简介" prop="intro">
        <el-input v-model="form.intro" placeholder="请输入短剧简介" />
      </el-form-item>
      <el-form-item label="备案号" prop="record_number">
        <el-input v-model="form.record_number" placeholder="请输入备案号" />
      </el-form-item>
      <el-form-item label="分类" prop="classify">
        <YxhySelect :value.sync="form.classify" :columns="classifyColumns" :clearable="true" />
      </el-form-item>
      <el-form-item label="版权" prop="copyright">
        <YxhySelect :value.sync="form.copyright" :columns="copyrightColumns" :clearable="true" />
      </el-form-item>
      <el-form-item label="总集数" prop="total_plot_num">
        <el-input v-model="form.total_plot_num" type="number" placeholder="请输入总集数" />
      </el-form-item>
      <el-form-item label="已更新集数" prop="update_plot_num">
        <el-input v-model="form.update_plot_num" type="number" placeholder="请输入已更新集数" />
      </el-form-item>
      <el-form-item label="是否完结" prop="is_end">
        <el-radio-group v-model="form.is_end">
          <el-radio :label="1">完结</el-radio>
          <el-radio :label="2">未完结</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否本周精选" prop="is_end">
        <el-radio-group v-model="form.is_featured">
          <el-radio :label="1">本周精选</el-radio>
          <el-radio :label="2">非本周精选</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="单集价格" prop="price">
        <el-input v-model="form.price" type="number" placeholder="请输入单集价格" />
      </el-form-item>
      <el-form-item label="开始收费集" prop="charge_plot_num">
        <el-input v-model="form.charge_plot_num" type="number" placeholder="请输入开始收费集" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" type="number" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="责编" prop="compendium">
        <el-input v-model="form.compendium" placeholder="请输入责编" />
      </el-form-item>
      <el-form-item label="视频目录" prop="video_folder">
        <div class="flex ai-center">
          <el-input v-model="form.video_folder" class="width-40" placeholder="请输入视频目录" :disabled="isEdit" />
          <p class="ml-10 font-color-2" style="line-height: normal">自定义英文文件夹名称，如：xiyouji</p>
        </div>
      </el-form-item>
      <el-form-item label="关联小程序" prop="product_ids">
        <YxhyTableDialogSelect
          :btn-text="`选择小程序`"
          :table-key="`product_id`"
          :table-name="`product_name`"
          :detail-data="isEdit ? formDetail : null"
          :detail-id-key="`product_ids`"
          :columns="columnsSelectMp"
          :query-params="queryParamsSelectMp"
          :query-columns="queryColumnsSelectMp"
          :request-fn="queryListNonSortMp"
          @selectResult="handleSelectResultMp"
        />
        <p class="font-color-2 font-14">不选则默认全部小程序生效</p>
      </el-form-item>
    </el-form>

    <div class="flex ai-center jc-center pb-50">
      <el-button type="info" plain @click="handleBack">返回</el-button>
      <el-button type="success" @click="handleVerify">{{ isEdit ? '修改' : '添加' }}</el-button>
    </div>
  </div>
</template>

<script>
import { addLibrary, editLibrary, queryInfoLibrary } from '@/api/video/library'
import { queryListClassify } from '@/api/config/classify.js'
import { queryListCopyright } from '@/api/miniProgram/copyright.js'
import { columnsSelectMp } from '@/views/video/library/Ds'
import {queryListMp, queryListNonSortMp} from '@/api/miniProgram/mp'
import { deepClone } from '@/utils'
export default {
  name: 'LibraryAdd',
  data() {
    return {
      classifyColumns: [],
      copyrightColumns: [],
      // 表单参数
      form: {
        library_id: '',
        is_publish: true, // 上架状态 1=上架 2= 未上架
        is_end: 1,
        sort: undefined,
        is_featured: 1// 本周精选 1=是 2=否
      },
      formDetail: {},
      // 表单校验
      rules: {
        title: [
          { required: true, message: '请输入短剧名', trigger: ['blur', 'change'] }
        ],
        cover_oss_id: [
          { required: true, message: '请选择封面', trigger: ['change'] }
        ],
        total_plot_num: [
          { required: true, message: '请输入总集数', trigger: ['blur', 'change'] }
        ],
        update_plot_num: [
          { required: true, message: '请输入已更新集数', trigger: ['blur', 'change'] }
        ],
        price: [
          { required: true, message: '请输入单集价格', trigger: ['blur', 'change'] }
        ],
        charge_plot_num: [
          { required: true, message: '请输入开始收费集', trigger: ['blur', 'change'] }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: ['blur', 'change'] }
        ],
        video_folder: [
          { required: true, message: '请输入视频目录', trigger: ['blur', 'change'] }
        ]
      },

      // 关联小程序
      queryParamsSelectMp: {
        product_id_search: undefined,
        product_name_search: undefined
      },
      queryColumnsSelectMp: [
        {
          label: '',
          placeholder: '请输入id',
          type: 'input',
          param: 'product_id_search'
        }, {
          label: '',
          placeholder: '请输入小程序名称',
          type: 'input',
          param: 'product_name_search'
        }
      ],
      columnsSelectMp,
      queryListMp,
      queryListNonSortMp
    }
  },
  computed: {
    isEdit() {
      return ![undefined, ''].includes(this.form.library_id)
    }
  },
  watch: {
    '$route.query': {
      handler(val) {
        this.form.library_id = this.$route.query.library_id || ''
        if (this.form.library_id) {
          this.queryListClassifyFn()
          this.queryListCopyrightFn()
          this.queryInfoLibraryFn()
        } else {
          this.reset()
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    async queryListClassifyFn() {
      const data = await queryListClassify({
        list_search: 2// 1=全部 2=启用 3=未启用
      })
      const arr = data.map(e => {
        return {
          label: e.title,
          value: e.classify_id
        }
      })
      this.classifyColumns = arr
    },
    async queryListCopyrightFn() {
      const data = await queryListCopyright({
        list_search: 2 //  1=全部 2=启用 3=未启用
      })
      const arr = data.map(e => {
        return {
          label: e.title,
          value: e.copyright_id
        }
      })
      this.copyrightColumns = arr
    },
    async queryInfoLibraryFn() {
      if (!this.form.library_id) return

      const data = await queryInfoLibrary({
        library_id: this.form.library_id
      })
      const { is_publish, classify, copyright } = data
      data.is_publish = is_publish === 1
      data.classify = classify === 0 ? undefined : classify
      data.copyright = copyright === 0 ? undefined : copyright

      this.form = deepClone(data)
      this.formDetail = deepClone(data)
    },
    async handleBack() {
      await this.$tab.closePage({
        path: '/video/library/add', name: 'LibraryAdd'
      })
      await this.$tab.refreshPage({ path: '/video/library/list', name: 'LibraryList' })
      await this.$tab.openPage('短剧库', '/video/library/list')
    },
    /** 接收小程序选择 */
    handleSelectResultMp(rows) {
      const is_str = rows.map(item => item.product_id).toString()
      this.form.product_ids = is_str
    },
    handleVerify() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.form.is_publish = this.form.is_publish ? 1 : 2
          if (this.isEdit) {
            this.form.total_plot_num = Number(this.form.total_plot_num)
            this.form.update_plot_num = Number(this.form.update_plot_num)
            this.form.charge_plot_num = Number(this.form.charge_plot_num)
            this.form.classify = this.form.classify || 0
            this.form.copyright = this.form.copyright || 0
            editLibrary(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.handleBack()
            })
          } else {
            addLibrary(this.form).then(res => {
              this.$modal.msgSuccess('添加成功')
              this.handleBack()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  padding: 20px;
  margin: 20px;
  border: 1px solid #dddddd;
}
.component-upload-image {
  ::v-deep .el-upload--picture-card {
    width: 120px;
    height: 170px;
    line-height: 170px;
  }
  ::v-deep .el-upload-list--picture-card .el-upload-list__item{
    width: 120px;
    height: 170px;
  }
}
</style>
